<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head th:include="include :: header">
</head>
<link rel="stylesheet" th:href="@{/css/yw.css}">

<body class="hold-transition skin-blue sidebar-mini">

<!--上传模态框 -->
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="modal-upload">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">上传附件</h4>
            </div>
            <div class="modal-body">
                <form id="uploadForm">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">选择文件并上传</label>
                        <div class="col-sm-8">
                            <input id="import-file" class="btn" type="file" name="file">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="btn-upload" type="button" class="btn btn-success" style="margin-top: 20px">
                    <span class="Bold">确定</span>
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal"
                        style="margin-top: 20px">取消
                </button>
            </div>
        </div>
    </div>
</div>

<!--选择参与人 参与部门  模态框-->
<div class="modal fade" id="modal-canYuRen-select">
    <div class="modal-dialog" style="width:800px;height: 1000px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">选择参与人</h4>
            </div>
            <div class="modal-body">
                <form id="branchForm">
                    <!--<div class="form-inline">-->
                    <!--<div class="form-group" style="margin-right: 10px;">-->
                    <!--<label>科室名称</label>-->
                    <!--<input type="text" name="" class="form-control" placeholder="请输入科室名称">-->
                    <!--</div>-->
                    <!--<div class="form-group" style="margin-right: 10px;">-->
                    <!--<label>部门名称</label>-->
                    <!--<input type="text" name="" class="form-control" placeholder="请输入部门名称">-->
                    <!--</div>-->
                    <!--<button type="button" class="btn btn-success" id="btn-search">-->
                    <!--<span class="Bold">&emsp;搜索&emsp;</span>-->
                    <!--</button>-->
                    <!--</div>-->
                    <div>
                        <button type="button" style="margin-bottom: 5px" class="btn btn-info pull-left"
                                id="btn-submit-CanYuRen">添加
                        </button>
                        <table class="table table-bordered" id="bootstrap-table1"></table>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<section class="content-header">
    <h1 style="display:inline-block">项目联络单编辑</h1>
    <button type="button" class="btn btn-success pull-right" style="display:block;margin-right:5%"
            onclick="save()"><span
            class="Bold">保存</span>
    </button>
    <button type="button" class="btn btn-primary pull-right" style="display:block;margin-right:2%"
            onclick="javascript:window.history.back(-1);"><span
            class="Bold">返回</span>
    </button>
</section>
<section class="content">
    <div class="box">
        <div class="box-body">
            <form id="sheetForm" class="form-horizontal">

                <!--<span style="letter-spacing: 12px;display: block;line-height: 20px;text-align: center">辽宁忠旺机械设备制造有限公司</span>-->
                <!--<span style="letter-spacing: 12px;display: block;line-height: 20px;text-align: center">www.zhongwangjx.com</span>-->

                <div style="width: 80%;margin: 10px auto;">
                    <input name="dsnContactId" th:value="${cContact.id}" type="hidden">
                    <input id="canYuBranchIdList" name="canYuBranchIdList" type="hidden">
                    <input id="sheetForm-proId" name="proId" th:value="${cContact.proId}" type="hidden">
                    <input id="sheetForm-proCode" th:value="${cContact.proCode}" type="hidden">
                    <table border="1" cellspacing="0" width="96%">
                        <thead>
                        <tr>
                            <th colspan="24" align="center" width="96%">
                                <table align="center">
                                    <tr align="center" style="height:40px;">
                                        <td>
                                            <img th:src="@{/img/logo3.jpg}" width="64px" height="40px"
                                                 style="margin-top: -30px">
                                            <div style="display: inline-block;margin-top: 5px;margin-left: 20px">
                                                <span style="letter-spacing: 24px;display: block;line-height: 20px;">&nbsp;辽宁忠旺机械设备制造有限公司</span>
                                                <span style="display: block;font-size: 12px;line-height: 20px;letter-spacing: 2px;">Liaoning Zhongwang Machinery Equipment Manufacturing Co., Ltd.</span>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </th>
                        </tr>

                        <tr>
                            <th colspan="24" align="center" width="96%">
                                <table align="center">
                                    <tr align="center" style="height:40px;font-size: larger">
                                        <td><span align="center">项 目 联 络 单</span>

                                        </td>
                                    </tr>
                                </table>
                            </th>
                        </tr>

                        <tr height="30px">
                            <th style="text-align: center;font-weight: normal" colspan="2" width="8%">项目编号</th>
                            <th style="text-align: center;font-weight: normal" colspan="6" width="24%">
                                <!--<input id="proCode" name="proCode" class="form-control" placeholder="请输入项目编号"-->
                                <!--type="text" list="proCode_list" autocomplete="off" th:value="${cContact.proCode}">-->
                                <!--<datalist id="proCode_list">-->
                                <!--</datalist>-->
                                <input id="sheetForm-proCodeSelect" style="width: 100%"
                                       class="form-control" name="proCode" th:value="${cContact.proCode}" readonly>
                            </th>
                            <th style="text-align: center;font-weight: normal" colspan="2" width="8%">项目名称</th>
                            <th style="text-align: center;font-weight: normal" colspan="6" width="24%">
                                <input id="proName" type="text" class="form-control" name="proName" readonly
                                       th:value="${cContact.proName}">
                            </th>
                            <th style="text-align: center;font-weight: normal" colspan="2" width="8%">项目数量</th>
                            <th style="text-align: center;font-weight: normal" colspan="6" width="24%">
                                <input id="proQty" type="number" class="form-control" name="proQty" readonly
                                       th:value="${cContact.proNum}">
                            </th>
                        </tr>

                        <tr height="30px">
                            <th style="text-align: center;font-weight: normal" colspan="2" width="8%">专业</th>
                            <th style="text-align: center;font-weight: normal" colspan="6" width="24%">
                                <select style="appearance:none" id="sheetForm-special" class="form-control"
                                        name="special"
                                        th:value="${cContact.special}">
                                    <option th:selected="${cContact.special==''}">请选择</option>
                                    <option th:selected="${cContact.special=='机械'}">机械</option>
                                    <option th:selected="${cContact.special=='流体'}">流体</option>
                                    <option th:selected="${cContact.special=='自动化'}">自动化</option>
                                </select>
                            </th>
                            <th style="text-align: center;font-weight: normal" colspan="2" width="8%">部分</th>
                            <th style="text-align: center;font-weight: normal" colspan="6" width="24%">
                                <select style="appearance:none" id="sheetForm-proPart" class="form-control"
                                        name="proPart"
                                        th:value="${cContact.proPart}">
                                    <option value="" selected></option>
                                    <option th:each="p : ${structList}" th:value="${p.proPart}"
                                            th:text="|${p.special}-${p.proPart}|"
                                            th:selected="${p.proPart eq cContact.proPart} and ${p.special eq cContact.special}"></option>
                                </select>
                            </th>
                            <th style="text-align: center;font-weight: normal" colspan="2" width="8%">问题类型</th>
                            <th style="text-align: center;font-weight: normal" colspan="6" width="24%">
                                <select style="appearance:none" class="form-control" name="questionType">
                                    <option th:selected="${cContact.conType == '技术联络'}">技术联络</option>
                                    <option th:selected="${cContact.conType == '售后服务'}">售后服务</option>
                                </select>
                            </th>
                        </tr>

                        <tr height="30px">
                            <th style="text-align: center;font-weight: normal" colspan="4" width="16%">需方</th>
                            <th style="text-align: center;font-weight: normal" colspan="8" width="32%">
                                <input id="customer" type="text" class="form-control" name="customer" readonly
                                       th:value="${cContact.customer}">
                            </th>
                            <th style="text-align: center;font-weight: normal" colspan="4" width="16%">安装地点</th>
                            <th style="text-align: center;font-weight: normal" colspan="8" width="32%">
                                <input id="insSite" type="text" class="form-control" name="insSite" readonly
                                       th:value="${cContact.insSite}">
                            </th>
                        </tr>

                        <tr height="30px" style="">
                            <th style="text-align: center;font-weight: normal" colspan="2" width="8%">参与科室</th>
                            <th style="font-weight: normal" colspan="22" width="88%">
                        <span style="text-align: left;margin-right: 2%;margin-left: 10px"
                              th:text="${createUserPost.branchName}"></span>
                                <span class="out-add" title="添加" style="text-align: right;margin-left: 20px"><i
                                        class="fa fa-plus text-green"></i></span>
                            </th>
                        </tr>


                        <tr style="">
                            <th style="font-weight: normal;height:300px;" colspan="24" width="96%">
                        <textarea name="content" placeholder="&nbsp;&nbsp;描述内容: "
                                  style="white-space:pre-line; resize: none;width:100%;height: 100%;border-bottom: none;border-left: none;border-right:none;padding: 5px;padding-left: 10px"
                                  th:text="${contact.content}"></textarea>
                            </th>
                        </tr>

                        <tr>
                            <td style="font-weight: normal;height:100px;" colspan="24" width="96%">
                                <div style="height: 95%;padding: 5px">
                                    <span>&nbsp;&nbsp;附件信息：</span>
                                    <span class="file-add" title="上传附件" style="margin-left: 90%"><i
                                            class="fa fa-plus text-green"></i></span>
                                    <div style="padding-left: 5%;padding-top: 10px">
                                        <input id="boot" type="hidden">
                                    </div>
                                </div>
                            </td>
                        </tr>


                        <tr height="30px">
                            <th style="text-align: right;font-weight: normal" width="8%" colspan="2">编制：</th>
                            <th style="text-align: left;font-weight: normal" width="16%" colspan="4"><span
                                    style="text-align: left;margin-right: 2%;margin-left: 10px"
                                    th:text="${createUser.name}"></span></th>
                            <th style="text-align: right;font-weight: normal" width="8%" colspan="2">联系方式：</th>
                            <th style="text-align: left;font-weight: normal" width="16%" colspan="4"><span
                                    style="text-align: left;margin-right: 2%;margin-left: 10px"
                                    th:text="${cContact.postTel}"></span></th>
                            <th style="text-align: right;font-weight: normal" width="8%" colspan="2">部门：</th>
                            <th style="text-align: left;font-weight: normal" width="16%" colspan="4"><span
                                    style="text-align: left;margin-right: 2%;margin-left: 10px"
                                    th:text="${createUserPost.branchName}"></span></th>
                            <th style="text-align: right;font-weight: normal" width="8%" colspan="2">审批：</th>
                            <th style="text-align: left;font-weight: normal" width="16%" colspan="4"></th>
                        </tr>

                        <tr height="30px">
                            <th style="text-align: right;font-weight: normal" colspan="4" width="16%">编制日期：</th>
                            <th style="text-align: left;font-weight: normal" colspan="8" width="32%"><span
                                    style="text-align: left;margin-right: 2%;margin-left: 10px"
                                    th:text="${cContact.createTime}"></span></th>
                            <th style="text-align: right;font-weight: normal" colspan="4" width="16%">审批日期：</th>
                            <th style="text-align: left;font-weight: normal" colspan="8" width="32%"></th>
                        </tr>
                        </thead>
                    </table>
                </div>

            </form>
        </div>
    </div>
</section>


<div th:include="include :: footer">
</div>
<script th:inline="javascript">


    var xinZeng = "xinZeng";
    var canYuCount = [[${canYuPostList}]].length; //每次添加参与人  计数+1   删除参与人计数-1   用此判断是否添加了参与人

    /**科室模态框 添加按钮事件*/
    $(function () {

        /** 将textarea内的信息显示为字符串 */
        $("#sheetForm textarea[name ='content']").val(toTextarea($("#sheetForm textarea[name ='content']").val()));


        //todo  自动扩充  参与人内容  附件等。。。
        let canYuList = [[${canYuPostList}]]; //获取参与人对象 数组
        for (let i = 0; i < canYuList.length; i++) {
            add1(canYuList[i].branchId, canYuList[i].branchName); //执行添加参与人方法

        }

        //todo 自动填充创建人附件信息 并 提供下载功能
        let fileList = [[${createFileList}]];//获取 附件信息
        if (fileList.length > 0) {
            for (let i = 0; i < fileList.length; i++) {
                $("#boot").after(`
                    <div style="display:inline-block;">
                        <input name="fileId" type="hidden" value="` + fileList[i].fileId + `">
                        <input name="fileLoadUrl" type="hidden" value="` + fileList[i].fileUrl + `">
                        <span>` + fileList[i].fileName + `</span>
                        <span class="file-down" title="下载">&nbsp;&nbsp;<i class="fa fa-download text-green"></i></span>
                        <span class="file-del" title="删除">&nbsp;&nbsp;<i class="fa fa-remove text-red"></i>&nbsp;&nbsp;&nbsp;&nbsp; </span>
                    </div>
                `);
            }
        }


        $("#btn-submit-CanYuRen").click(function () {
            var branchIdList = $("#canYuBranchIdList").val();
            var branchIdListArray = branchIdList.split(",");
            $('input[name="checkbox_select"]:checkbox:checked').each(function (i, value, id) {
                var branchId = $(this).attr("value");
                var branchName = $(this).attr("id");
                var userName = $(this).attr("userName");
                for (let j = 0; j < branchIdListArray.length; j++) {
                    if (branchIdListArray[j] === branchId) {
                        js.modal.alert("请勿重复添加！");
                        return;
                    }
                }
                if (userName === [[${loginUser.name}]]) {
                    js.modal.alert("请勿添加自己为联络人！");
                    return;
                }
                add1(branchId, branchName);
            });
            js.modal.hide('modal-canYuRen-select');
        });

        /**重置复选框*/
        js.modal.hideEvent("modal-canYuRen-select", function () {
            js.reset("branchForm");
        });

        /**上传附件模态框*/
        $('#sheetForm').on('click', '.file-add', function () {
            js.modal.open("modal-upload");
        });

        /** 假上传  不写入数据库 */
        $("#btn-upload").click(function () {
            var $this = $(this);
            $this.attr('disabled', true);
            js.validSubmit({
                formId: "uploadForm",
                url: ctx + "check/tempUpload",
                data: new FormData($("#uploadForm")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        $("#uploadForm")[0].reset();
                        js.modal.hide("modal-upload");
                        fillDiv(result);
                    } else {
                        $("#uploadForm")[0].reset();
                        js.modal.warning(result.msg);
                    }
                }
            });
            $this.attr('disabled', false);
        });


        /**移除附件*/
        $('#sheetForm').on('click', '.file-del', function () {
            $(this).parent().remove();
        });
        /**下载附件*/
        $('#sheetForm').on('click', '.file-down', function () {
            let fileName = $(this).prev();
            let fileUrl = $(this).prev().prev();
            let fileId = $(this).prev().prev().prev();
            // alert(fileName.html()); //附件名
            // alert(fileUrl.val());   //附件url
            // alert(fileId.val());    //附件id
            window.location.href = ctx + "contact/fileDown?fileUrl=" + fileUrl.val();
        });


        /**增加参与人*/
        $('#sheetForm').on('click', '.out-add', function () {
            js.modal.open("modal-canYuRen-select");
            loadTable1();
        });

        // 移除参与人
        $('#sheetForm').on('click', '.out-del', function () {
            //找到要删除的人的 父级 span  id
            var canYuBranchId = $(this).parent().attr('id');
            //删除人名 span
            $("#" + canYuBranchId).remove();
            //删除下方 tr
            $("." + canYuBranchId).remove();

            //删除隐藏input中 branchid
            var delCanYuBranchId = canYuBranchId.slice(7);
            var idValue = $("#canYuBranchIdList").val();
            var BranchIdList = idValue.split(",");
            for (let i = 0; i < BranchIdList.length; i++) {
                if (BranchIdList[i] === delCanYuBranchId) {
                    BranchIdList.splice(i, 1);
                }
            }
            $("#canYuBranchIdList").val(BranchIdList.toString());
        });


        // js.select2({
        //     id: 'sheetForm-proCodeSelect',
        //     placeholder: '',
        //     ajax: {
        //         url: function () {
        //             return ctx + 'project/select'
        //         },
        //         processResults: function (data, page) {
        //             let array = data;
        //             for (let i = 0; i < data.length; i++) {
        //                 array[i]["id"] = array[i]['proId'];
        //                 array[i]["text"] = array[i]['proCode'];
        //             }
        //             return {results: array};
        //         },
        //     }
        // });
        /** 项目编号下拉框选中 */
        $("#sheetForm-proCodeSelect").on("select2:select", function () {
            $("#proName").val($(this).select2("data")[0].proName);
            $("#proQty").val($(this).select2("data")[0].proQty);
            $("#sheetForm-proId").val($(this).select2("data")[0].proId);
            $("#sheetForm-proCode").val($(this).select2("data")[0].proCode);
            $("#customer").val($(this).select2("data")[0].customer);
            $("#insSite").val($(this).select2("data")[0].insSite);
            getPart();
        });

        $("#sheetForm-proCode").change(function () {
            getPart();
        });

        $("#sheetForm-special").change(function () {
            getPart();
        });
    });


    /**填充div  附件信息*/
    function fillDiv(result) {
        var tempUrl = result.data;
        var fileName = tempUrl.substring(tempUrl.lastIndexOf("/") + 1);
        $("#boot").after(`
            <div style="display:inline-block;">
                <input name="fileUrl" type="hidden" value="` + tempUrl + `">
                <input name="fileName" type="hidden" value="` + fileName + `">
                <span>` + fileName + `</span>
                <span class="file-del" title="删除">&nbsp;&nbsp;<i class="fa fa-remove text-red"></i>&nbsp;&nbsp;&nbsp;&nbsp; </span>
            </div>
        `);
    }


    function add1(a1, a2) {
        var xinZengClass = xinZeng + a1;
        //参与人后添加 人名和叉号
        $(".out-add").before(`
              <span id="` + xinZengClass + `">&nbsp;&nbsp;&nbsp;` + a2 + `<span class="out-del" title="删除" ><i class="fa fa-remove text-red"></i> </span></span>
            `);

        //隐藏input框填 科室id  用 ，分隔
        var branchId = a1;
        var temp1 = $("#canYuBranchIdList").val();
        var temp2 = temp1 + "," + branchId;
        if (temp1 === null || temp1 === "" || temp1 === undefined) {
            $("#canYuBranchIdList").val(temp2.slice(1));
        } else {
            $("#canYuBranchIdList").val(temp2);
        }
        js.modal.hide("modal-canYuRen-select")
    }


    /**
     * @Description:确认保存
     * @Author: zcb
     * @Date: 2020-12-16 10:53:39
     **/
    function save() {
        js.modal.confirm("确认保存吗？", function (result) {
            if (result) {
                callBack();
            }
            if (canYuCount <= 0) {
                js.modal.alert("请添加至少一位参与人！");
            } else {
                if ($("#content").val() === null || $("#content").val() === "") {
                    js.modal.alert("请填写描述内容！");
                } else {
                    js.submit({
                        formId: "sheetForm",
                        url: ctx + 'editContact1',
                        data: new FormData($("#sheetForm")[0]),
                        success: function (result) {
                            if (result.type === web_status.SUCCESS) {
                                js.modal.success(result.msg);
                                location.href = ctx + "contact/return";
                            } else {
                                js.modal.warning(result.msg);
                            }
                        }
                    });
                }
            }
        })
    }

    var table1;

    function loadTable1() {
        /** 加载科长表格 */
        table1 = js.table.init({
            id: "bootstrap-table1",
            url: ctx + 'deptList/select',
            showColumns: false,
            showExport: false,
            pageSize: 300,
            pagination: false,
            columns: [
                {
                    title: '<input class="checkboxAll"  type="checkbox" onclick="selectedAll()" >', width: '40',
                    formatter: function (value, row, index) {
                        return '<input class="checkbox_select"  type="checkbox" name= "checkbox_select" ' +
                            'value= "' + $('<div/>').text(row.branchId).html() + '" id="' + $('<div/>').text(row.branchName).html() + '" ' +
                            '  userName="' + $('<div/>').text(row.userName).html() + '"  >';
                    }
                },
                {
                    title: '序号', field: 'id', width: '50',
                    formatter: function (value, row, index, field) {
                        return index + 1;
                    }
                },
                {
                    title: "参与人id", field: 'sysId'
                    , visible: false
                },
                {
                    title: "科室id", field: 'branchId'
                    , visible: false
                },
                {title: "科室名称", field: 'branchName'},
                {title: "部门名称", field: 'deptName'}
                // ,{title: "参与人", field: 'userName'}
            ]
        });
    }

    /**
     *全选
     */
    function selectedAll() {
        if ($('.checkboxAll').is(":checked")) {
            $('.checkbox_select').each(function () {
                this.checked = true;
            });
        } else {
            $('.checkbox_select').each(function () {
                this.checked = false;
            });
        }
    }


    /** 获取部分 */
    function getPart() {
        let code = $("#sheetForm-proCode").val();
        let type = $("#sheetForm-special").val();
        switch (type) {
            case '请选择' :
            case '机械' :
            case '流体' :
            case '自动化' :
                fetchPart(code, type);
                break;
        }
    }

    function fetchPart(code, type) {
        js.get({
            url: ctx + 'part/list',
            data: {
                code: code,
                type: type
            },
            success: function (result) {
                $("#sheetForm-proPart").empty().append(`<option value="">请选择</option>`);
                result.forEach(value => {
                    if (value) {
                        $("#sheetForm-proPart").append(`<option value="${value.id}">${value.special}-${value.proPart}</option>`);
                    }
                })

            }
        });
    }

    /** 替换特殊字符 */
    function toTextarea(str) {
        var reg = new RegExp("<br>", "g");
        var regSpace = new RegExp("&ensp;", "g");
        str = str.replace(reg, "\n");
        str = str.replace(regSpace, " ");
        return str;
    }


</script>